<script setup>
import publicPage from '../publicPage.vue'
import EchartsClocking from '../echarts/EchartsClocking.vue'
import EchartsRanking from '../echarts/EchartsRanking.vue'
import EchartsSafety from '../echarts/EchartsSafety.vue'
import { DemoOne } from '@/stores/index'
const visible = DemoOne()
</script>

<template>
  <transition name="left">
    <div v-if="visible.vuepage" id="gardenleft">
      <div class="parcel_BOX">
        <div class="clocking_box">
          <publicPage>
            <h4>人员考勤分析</h4>
          </publicPage>
          <div class="clockingEcharts">
            <EchartsClocking></EchartsClocking>
          </div>
        </div>
        <div class="ranking_box">
          <publicPage>
            <h4>园区排名</h4>
          </publicPage>
          <div class="rankingEcharts">
            <EchartsRanking></EchartsRanking>
          </div>
        </div>
        <div class="safety_box">
          <publicPage>
            <h4>安保情况</h4>
          </publicPage>
          <div class="safetyEcharts">
            <EchartsSafety></EchartsSafety>
          </div>
        </div>
      </div>
    </div>
  </transition>

</template>

<style lang="scss" scoped>
#gardenleft {
  position: absolute;
  left: vw(20px);
  top: vh(84px);
  width: vw(470px);
  height: vh(973px);
  background-color: rgba(3, 19, 60, 0.5);
  z-index: 1;
  color: #fff;
  display: flex;
  justify-content: center;

  .parcel_BOX {
    position: relative;
    top: vh(16px);
    width: vw(429px);
    height: vh(957px);

    h4 {
      margin-left: vw(30px);
      font-size: vw(16px);
      font-weight: 400;
    }

    .clocking_box {
      margin-bottom: vh(29px);
      width: 100%;
      height: vh(281px);

      // 图表1
      .clockingEcharts {
        width: 100%;
        height: vh(239px);
      }
    }

    .ranking_box {
      margin-bottom: vh(30px);
      width: 100%;
      height: vh(307px);

      // 图表2
      .rankingEcharts {
        width: 100%;
        height: vh(265px);
      }
    }


    .safety_box {
      height: vh(310px);
      width: 100%;

      // 图表3
      .safetyEcharts {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/* 淡入淡出加滑动效果 */
.left-enter-active,
.left-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}

.left-enter-from {
  opacity: 0;
  transform: translateX(-100px);
}

.left-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}
</style>